import React from 'react';
import ReactDOM from 'react-dom';
import Charts from "components/echarts";
import {Col, Popover, Row} from "antd";
import {messages} from "share/common";

class ExpenseTypePie extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      chosenIndex: props.chosenIndex,
    }
  }

  getOption = (percent, color) => {
    return {
      series: [
        {
          type:'pie',
          radius: ['50%', '70%'],
          label: {
            normal: {
              show: false
            }
          },
          hoverAnimation: false,
          data:[
            {value: 100 - percent, itemStyle: { color: 'transparent' }},
            {value: percent, itemStyle: { color }}
          ]
        }
      ]
    };
  };

  handlePieChange = (category, index) => {
    this.props.handleClick(category, index);
    this.setState({ chosenIndex: index })
  };

  render() {
    const { invoiceGroups } = this.props;
    const { chosenIndex } = this.state;
    return (
      <Row className="expense-percent-area" gutter={50}>
        <Col span={4}>
          {/* 全部费用 */}
          <div className="expense-percent-all expense-percent"
               onClick={() => this.handlePieChange("all", "all")}>
            <div className="expense-type-pie">
              <Charts
                options={this.getOption(100, chosenIndex === 'all' ? '#77bffa' : '#bfd8ef')}
                height={60}
                className="pie"
              />
              <div className="pie-label">
                <h4>
                  <Popover content={messages('expense-parent-report.key41'/*全部费用*/)} placement="topLeft">
                    {messages('expense-parent-report.key41'/*全部费用*/)}
                  </Popover>
                </h4>
                <h4>100.00%</h4>
              </div>
            </div>
          </div>
        </Col>
        <Col span={20} style={{paddingLeft: '0px'}}>
          <div className="expense-percent-group" style={{ transform: 'translate3d(0, 0, 0)' }}>
            {invoiceGroups.map((category, index) => (
              <div className="expense-percent" key={index} onClick={() => this.handlePieChange(category, index)}>
                <div className="expense-type-pie">
                  <Charts
                    options={this.getOption(category.proportion, chosenIndex === index ? '#77bffa' : '#bfd8ef')}
                    width={60}
                    height={60}
                  />
                  <div className="pie-label">
                    <h4>
                      <Popover content={category.categoryName} placement="topLeft">
                        {category.categoryName}
                      </Popover>
                    </h4>
                    <h4>{category.proportion.toFixed(2)}%</h4>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Col>
      </Row>
    )
  }
}

ExpenseTypePie.PropTypes = {
  chosenIndex: React.PropTypes.any,
  invoiceGroups: React.PropTypes.object,
  handleClick: React.PropTypes.func
};

ExpenseTypePie.defaultProps = {

};

export default ExpenseTypePie;
